<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支付</title>
  <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/framework/reset.css">
  <link rel="stylesheet" href="../static/css/footer.css">
  <link rel="stylesheet" href="../static/css/editRecipient.css">
  <link href="../static/layui-v2.9.1/layui/css/layui.css" rel="stylesheet">
  <script src="../static/layui-v2.9.1/layui/layui.js"></script>
  <link rel="stylesheet" href="../static/bootstrap-5.3.0-dist/css/bootstrap.min.css">
  <script src="../static/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="../static/css/recipientList.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<style>
  .main {
    background-color: hsl(0, 0%, 100%);
    flex: 1;
    flex-direction: column;
    border-radius: 10px;
  }

  .container {
    display: flex;
    justify-content: space-between;
  }

  .item {
    text-align: center;
  }
</style>
</head>

<body>
<div class="wrapper" style="padding: 20px;">
  <header style="display: flex;">
    <i class="fa fa-angle-left fa-2x" onclick="location.href='/index'" style="font-size: 20px">首页</i>
    <p style="margin: auto;">缴费类型</p>
    <p style="margin-right: 46.84px;"></p>
  </header>
  <br><br>
  <main class="main">
    <div onclick="location.href='/address'">
      <div class="container">
        <div class="item">
          <img src="../static/img/水费.png" id="水费" width="宽度" height="高度">
          <p>水费</p>
        </div>
        <div class="item">
          <img src="../static/img/电费.png" id="电费" width="宽度" height="高度">
          <p>电费</p>
        </div>
        <div class="item">
          <img src="../static/img/燃气费.png" id="燃气费" width="宽度" height="高度">
          <p>燃气费</p>
        </div>
      </div>

      <br>
      <div class="container">
        <div class="item">
          <img src="../static/img/手机充值.png" id="手机充值" width="宽度" height="高度">
          <p>手机充值</p>
        </div>
      </div>
    </div>

  </main>

  <footer class="footer">
    <div>
      <button type="button" class="layui-btn">
        <i class="layui-icon layui-icon-left"></i>
      </button>
      <button type="button" class="layui-btn">
        <i class="layui-icon layui-icon-right"></i>
      </button>
    </div>
  </footer>
</div>
<script>
  const back = document.querySelector('button:first-child')
  const forword = back.nextElementSibling
  back.addEventListener('click', function () {
    //history.back()
    history.go(-1)
  })

  forword.addEventListener('click', function () {
    //history.forward()
    history.go(1)
  })

</script>
</body>

</html>